<template>
   <view class="uv-page" ref="page">
      <uv-cell-group>
         <uv-cell
            @click="showVtabs(index)"
            :title="item.title"
            v-for="(item, index) in list"
            :key="index"
            isLink
         >
            <template v-slot:icon>
               <image class="uv-cell-icon" :src="item.iconUrl" mode="widthFix"></image>
            </template>
         </uv-cell>
      </uv-cell-group>
   </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const list = ref([
   {
      title: '垂直选项卡-联动',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/picker/1.png',
      key: 1,
   },
   {
      title: '垂直选项卡-不联动',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/picker/2.png',
      key: 0,
   },
]);
const showVtabs = (index: number) => {
   uni.$uv.route(`pages/componentsD/vtabs/vtabs-${list.value[index].key}`);
};
</script>

<style lang="scss" scoped>
.uv-page {
   .color {
      width: 50rpx;
      height: 50rpx;
      border-radius: 6rpx;
   }
}
</style>
